<?php $this->load->module('mobile/index/header', $common);?>
<style>
    .ranklist img{
        width:45px;
        height:45px;
        float:left;
    }
    .ranklist li{
        display: block;
        border-bottom: 1px solid #c8c7cc;
        height: 70px;
        padding: 12px;
    }


    .wrap{background:#fff}.list{width:100%}
    .list li{height:70px}
    .list a{display: block;height: 50px;line-height: 50px;border-bottom: 1px solid #ECECEC;padding:10px 40px 10px 10px;position: relative}
    .list a span{font-weight:bold}
    .list a em{font-weight:normal;display:block}
    .ctrl{position:absolute;right:10px;top:0}
    .fa-succ:before{line-height:70px;font-size:20px;color:#25AA09;font-weight:bold}
    .blue{color:#025287}
    #loading{ display:none}#loading a{padding:10px;text-align:center}
    .rank_tab .rank-bar-detail{ padding:15px 0; height:50px; }
    .rank_tab .rank-bar-detail .rank-in-wrapper{ width:50%; float:left; text-align:center; box-sizing:border-box; }
    .rank_tab .rank-bar-detail .rank-in-wrapper{ position:relative; z-index:1; }
    .rank_tab .rank-bar-detail .rank-in-wrapper{ border-left:1px solid #ECECEC; }
    .rank_tab .rank-bar-detail .rank-in-wrapper p{ line-height:1.5em; color:#A6A6A6; font-size:13px; }
    .rank_tab .rank-bar-detail .rank-in-wrapper .info-words{ font-size:20px; color:#5A85CE; display:inline-block; min-width:50px; padding:5px; }
    .rank_tab .rank_info{ padding:15px 0 0; box-sizing:border-box; background:#FFF; border-top:1px solid #ECECEC; }
    .rank_tab .rank_info h4{ padding:0 12px; font-size:15px; }
    .rank_tab .rank_list{ padding:15px 15px 20px; box-sizing:border-box; background:#FFF; }
    .rank_tab .rank_list .rank_bar_list > li{ height:70px; clear:left; padding:10px 10px 10px 30px;border-bottom:1px solid #ECECEC }
    .rank_tab .rank_list .rank_bar_list > li .rank_icon, .rank_tab .rank_list .rank_bar_list > li .rank_grade{ display:block; width:50px; height:40px; float:left; }
    .rank_tab .rank_list .rank_bar_list > li .rank_grade{ font-weight:bold; font-size:25px; line-height:40px; /*text-align: center;*/ }
    .rank_tab .rank_list .rank_bar_list > li .rank_bar_face{ float:left; width:40px; height:40px; border-radius:50%; }
    .rank_tab .rank_list .rank_bar_list > li .rank_bar_info_wrap{ margin-left:100px; }
    .rank_tab .rank_list .rank_bar_list > li .rank_bar_info_wrap .rank_bar_name{ font-size:16px; line-height:18px; }
    .rank_tab .rank_list .rank_bar_list > li .rank_bar_info_wrap .rank_bar_today_topic{ font-size:13px; color:#A6A6A6; margin-top:6px; }
    .rank_user{display:block;float:left}
    .rank_bar_today_topic b{padding:0 2px}
    .rank1{color:#FBA41F}
    .rank2{color:#F46751}
    .rank3{color:#5BCAE1}
    .rankn{color:#92B743}
    .log-title{ position:relative; font-size:15px; padding:10px 0 0 0; line-height:15px; }
    .container{ margin:10px; overflow:hidden; }
    .topicBox{ margin-bottom:10px; background-color:#FFF; overflow:hidden; -moz-box-shadow:0 1px 2px #CACACA; -webkit-box-shadow:0 1px 2px #CACACA; box-shadow:0 1px 2px #CACACA; border-radius:2px; padding:10px 10px 8px; position:relative; }
    .ht-tit{ display:-webkit-box; display:-moz-box; display:box; padding-bottom:10px; }
    .htt-img, .htt-img img{ height:45px; width:45px; position:relative; display:block; border-radius:22px; background-size:45px; }
    .ht-tit .htt-content{ padding-left:13px; }
    .ht-tit .htt-content .httc-name{ color:#333; display:block; font-size:14px; }
    .ht-tit .htt-content .httc-info{ padding-top:5px; }
    .ht-content-ellipsis{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; margin-bottom:10px; }
    .time{ font-size:12px; color:#7F7F7F; display:inline-block; }
    .log-info{ background:#F7F7F7; padding:10px 5px; font-size:12px; color:#7F7F7F; }
    .log-info b{ padding:0 2px; color:#5A85CE }
    .gold{ color:#FBA41F !important; }
</style>
<div class="wrap rank_tab content">
    <div id="rankList" class="rank_list section-1px">
        <ul id="rankBarList" class="rank_bar_list">
        <?php foreach ($list as $k => $v) {
            ?>
            <li class="clear">
                <span class="rank_grade rank<?php echo $k < 3 ? $k + 1 : 'n' ?>"><?php echo $k + 1 ?></span>
                <a class="rank_user">
                    <img class="rank_bar_face" src="<?php echo URLPIC.$v['avatar']?>">
                </a>
                <div class="rank_bar_info_wrap">
                    <p class="rank_bar_name">
                        <a>
                            <?php echo $v['realname'] ? $v['realname'] : ($v['nickname'] ? $v['nickname'] : '-')?>
                        </a>
                    </p>

                    <p class="rank_bar_today_topic">
                        总浏览量：<?php echo $v['views']?>
                    </p>
                </div>
            </li>
        <?php
        }
        ?>
    </ul>
    </div>
</div>

<?php $this->load->module('mobile/index/footer', $common);?>
<script type="text/javascript">
    function alert_popup(text){
        $.dialog({
            style:'tip',
            width:200,
            closeTime:500,
            content: '<p style="text-align: center">'+text+'</p>'
        }).open();
    }
    $(function(){

        $('.btn').click(function(){
            if($('input[name="name"]').val().length == 0){
                alert_popup('请输入昵称');
                return false;
            }
            var name = $('input[name="name"]').val();
            var gender = $('input[name="gender"]:checked').val();
            $.post('<?php echo $form_url ;?>',{
                name: name,
                gender: gender
            },function(data){
                if(data.status=='1')
                {
                    window.location.reload() ;
                }
                alert_popup(data.info);
                return false;
            },'json')
        })

    })
</script>